<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Form Wizard - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/icomoon.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li class="active"><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!-- /nav -->
            </div><!-- /side left-->
            
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Form Wizard</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Form wizard</li>
                    </ul>
                </header> <!--/ content header -->
                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- BASIC WIZARD 
                            ================================================== -->
                            <!-- widget basic wizard -->
                            <div class="widget border-cyan" id="widget-wizard1">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Basic with validation</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <div class="help-inline bordered-left">
                                            <h5 class="help-inline color-white" style="margin-right: 5px; font-weight: lighter">Progress</h5>
                                            <div class="checkbox-slide checkbox-slidetext bg-silver" style="vertical-align: middle;margin: 0;">
                                                <input class="input-fx" type="checkbox" id="with-progress1" name="with-progress" value="0" />
                                                <label for="with-progress1"></label>
                                            </div>
                                        </div>
                                        <button data-toggle="collapse" data-collapse="#widget-wizard1" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content" id="wizard1">
                                    <form class="form-horizontal" name="wizard-1" id="wrapped1" />
                                        <fieldset>
                                            <legend class="navigation"><a class="backward color-black text-2x" href="#"><i class="icomo-arrow-left"></i></a> Basic Wizard With Validation</legend>
                                            <div class="progress hide" style="margin-bottom: 20px;">
                                                <div class="bar bg-mauve" style="width: 0%;"></div>
                                            </div>
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">First name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="firstname" class="required input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Last name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="lastname" class="required input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">Gender?</label>
                                                    <div class="controls">
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx required" type="radio" value="Male" id="radio-gender1" name="gender" />
                                                            <label for="radio-gender1">Male</label>
                                                        </div>
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx required" type="radio" value="Female" id="radio-gender2" name="gender" />
                                                            <label for="radio-gender2">Female</label>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="submit step">
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="fname" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="lname" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="sgender" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->

                                            <div class="navigation form-actions bg-silver">
                                                <button type="button" class="btn bg-cyan forward">Forward</button>
                                                <button type="submit" class="btn bg-emerald submit">Submit</button>
                                            </div><!-- /navigation -->
                                        </fieldset>
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget basic wizard -->
                            
                            
                            <!-- widget basic wizard2 -->
                            <div class="widget bg-cyan" id="widget-wizard2">
                                <!-- widget header -->
                                <div class="widget-header">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Basic with validation</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <div class="help-inline bordered-left">
                                            <h5 class="help-inline" style="margin-right: 5px; font-weight: lighter">Progress</h5>
                                            <div class="checkbox-slide checkbox-slidetext bg-silver" style="vertical-align: middle;margin: 0;">
                                                <input class="input-fx" type="checkbox" id="with-progress2" name="with-progress" value="0" />
                                                <label for="with-progress2"></label>
                                            </div>
                                        </div>
                                        <button data-toggle="collapse" data-collapse="#widget-wizard2" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content" id="wizard2">
                                    <form class="form-horizontal" name="wizard2" id="wrapped2" />
                                        <fieldset>
                                            <legend class="navigation"><a class="backward color-white text-2x" href="#"><i class="icomo-arrow-left"></i></a> Basic Wizard With Validation</legend>
                                            <div class="progress hide" style="margin-bottom: 20px;">
                                                <div class="bar bg-mauve" style="width: 0%;"></div>
                                            </div>
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">First name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="firstname2" class="required input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Last name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="lastname2" class="required input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">Gender?</label>
                                                    <div class="controls">
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx required" type="radio" value="Male" id="radio-gender3" name="gender2" />
                                                            <label for="radio-gender3">Male</label>
                                                        </div>
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx required" type="radio" value="Female" id="radio-gender4" name="gender2" />
                                                            <label for="radio-gender4">Female</label>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="submit step">
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="fname2" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="lname2" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Your first name</label>
                                                    <div class="controls">
                                                        <p id="sgender2" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->

                                            <div class="navigation form-actions">
                                                <button type="button" class="btn bg-cyan bordered forward">Forward</button>
                                                <button type="submit" class="btn bg-emerald bordered submit">Submit</button>
                                            </div><!-- /navigation -->
                                        </fieldset>
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget basic wizard2 -->
                            
                            
                            

                            <!-- WIZARD STYLE #1
                            ================================================== -->
                            <h3 class="page-header">Wizard Style #1</h3>
                            <!-- widget wizard1 #1 -->
                            <div class="widget border-cyan" id="widget-wizard3">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Style #1</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action color-cyan">
                                        <button data-toggle="collapse" data-collapse="#widget-wizard3" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <!-- wizard -->
                                    <div id="wizard3">
                                        <form class="form-horizontal" id="wrapped3" />
                                            <ul class="wizard-steps">
                                                <li class="active"><span class="badge badge-info">1</span>Step 1</li>
                                                <li><span class="badge">2</span>Step 2</li>
                                                <li><span class="badge">3</span>Step 3</li>
                                                <li><span class="badge">4</span>Step 4</li>
                                                <li><span class="badge">5</span>Step 5</li>
                                            </ul>

                                            <div class="step">
                                                <h2>Hello Wizard!</h2>
                                                <p class="well well-large bg-silver">Lorem ipsum dolor sit amet, quia arcu, condimentum gravida mattis vulputate. Commodo viverra sodales, aliquam nunc metus, fringilla praesent dui ut ultricies in in, luctus odio. Quisque hendrerit congue viverra, tortor wisi, integer et ut ligula pede nonummy, tellus leo velit congue nunc nunc, eu in mattis tempor non. Aliquet urna sed consectetuer nisl ac, est gravida a augue non odio, molestie sollicitudin duis, sapien nec ut et vestibulum consequat erat, vestibulum feugiat vestibulum perferendis. Nullam diam id, volutpat fringilla. Sem massa aliquet, ante phasellus ultricies, ut elit et amet euismod. Tristique porta praesent duis ultrices. Quis rhoncus metus sit ut ac egestas, mus facilisis tellus nec, at bibendum at nunc nam vel sollicitudin, mollis aliquam sit nam nec nostrud donec, id aliquet.</p>
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="firstname">Firstname</label>
                                                    <div class="controls">
                                                        <input id="firstname" class="input-xlarge" name="firstname" type="text" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="lastname">Lastname</label>
                                                    <div class="controls">
                                                        <input id="lastname" class="input-xlarge" name="lastname" type="text" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="username">Username</label>
                                                    <div class="controls">
                                                        <div class="input-prepend input-prepend-inline">
                                                            <input id="username" class="input-xlarge" name="username" type="text" />
                                                            <span class="add-on">@</span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="password">Password</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="password" class="input-xlarge" name="password" type="password" />
                                                            <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="confirm_password">Confirm password</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="confirm_password" class="input-xlarge" name="confirm_password" type="password" />
                                                            <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="email">Email</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="email" class="input-xlarge" name="email" type="email" />
                                                            <span class="add-on"><i class="icomo-mail-5"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step submit">
                                                <p class="lead">Congratulations!! you have completed the steps...</p>
                                            </div>

                                            <div class="navigation form-actions bg-silver">
                                                <button type="button" class="btn bg-cyan bordered prev">Prev</button>
                                                <button type="button" class="btn bg-cyan bordered next">Next</button>
                                                <button type="submit" class="btn bg-emerald bordered submit">Submit</button>
                                            </div>
                                        </form>
                                    </div><!-- /wizard -->
                                </div><!-- /widget content -->
                            </div> <!-- /widget wizard1 #1 -->
                            
                            
                            
                            <!-- widget wizard2 #1 -->
                            <div class="widget bg-cyan" id="widget-wizard4">
                                <!-- widget header -->
                                <div class="widget-header">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Style #1</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-wizard4" class="btn">
                                            <i class="aweso-minus" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <!-- wizard -->
                                    <div id="wizard4">
                                        <form class="form-horizontal" id="wrapped4" />
                                            <ul class="wizard-steps">
                                                <li class="active"><span class="badge badge-info">1</span>Step 1</li>
                                                <li><span class="badge">2</span>Step 2</li>
                                                <li><span class="badge">3</span>Step 3</li>
                                                <li><span class="badge">4</span>Step 4</li>
                                                <li><span class="badge">5</span>Step 5</li>
                                            </ul>

                                            <div class="step">
                                                <h2>Hello Wizard!</h2>
                                                <p class="well well-large">Lorem ipsum dolor sit amet, quia arcu, condimentum gravida mattis vulputate. Commodo viverra sodales, aliquam nunc metus, fringilla praesent dui ut ultricies in in, luctus odio. Quisque hendrerit congue viverra, tortor wisi, integer et ut ligula pede nonummy, tellus leo velit congue nunc nunc, eu in mattis tempor non. Aliquet urna sed consectetuer nisl ac, est gravida a augue non odio, molestie sollicitudin duis, sapien nec ut et vestibulum consequat erat, vestibulum feugiat vestibulum perferendis. Nullam diam id, volutpat fringilla. Sem massa aliquet, ante phasellus ultricies, ut elit et amet euismod. Tristique porta praesent duis ultrices. Quis rhoncus metus sit ut ac egestas, mus facilisis tellus nec, at bibendum at nunc nam vel sollicitudin, mollis aliquam sit nam nec nostrud donec, id aliquet.</p>
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="firstname">Firstname</label>
                                                    <div class="controls">
                                                        <input id="firstname2" class="input-xlarge" name="firstname2" type="text" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="lastname">Lastname</label>
                                                    <div class="controls">
                                                        <input id="lastname2" class="input-xlarge" name="lastname2" type="text" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="username">Username</label>
                                                    <div class="controls">
                                                        <div class="input-prepend input-prepend-inline">
                                                            <input id="username2" class="input-xlarge" name="username2" type="text" />
                                                            <span class="add-on">@</span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="password">Password</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="password2" class="input-xlarge" name="password2" type="password" />
                                                            <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label" for="confirm_password">Confirm password</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="confirm_password2" class="input-xlarge" name="confirm_password2" type="password" />
                                                            <span class="add-on"><i class="icomo-feed-4"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label" for="email">Email</label>
                                                    <div class="controls">
                                                        <div class="input-append input-append-inline">
                                                            <input id="email2" class="input-xlarge" name="email2" type="email" />
                                                            <span class="add-on"><i class="icomo-mail-5"></i></span>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step submit">
                                                <p class="lead">Congratulations!! you have completed the steps...</p>
                                            </div>

                                            <div class="navigation form-actions">
                                                <button type="button" class="btn bg-cyan bordered prev">Prev</button>
                                                <button type="button" class="btn bg-cyan bordered next">Next</button>
                                                <button type="submit" class="btn bg-emerald bordered submit">Submit</button>
                                            </div>
                                        </form>
                                    </div><!-- /wizard -->
                                </div><!-- /widget content -->
                            </div> <!-- /widget wizard2 #1 -->
                            
                            
                            

                             <!-- WIZARD STYLE #2
                            ================================================== -->
                            <h3 class="page-header">Wizard Style #2</h3>
                            <!-- widget wizard1 style #2 -->
                            <div class="widget border-cyan">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Style #2</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <ul class="nav nav-tabs" id="nav-wizard1">
                                            <li class="active"><a href="#">Step 1</a></li>
                                            <li><a href="#">Step 2</a></li>
                                            <li><a href="#">Step 3</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content" id="wizard5">
                                    <form class="form-horizontal" name="wizard5" />
                                        <fieldset>
                                            <legend class="navigation"><a class="backward color-black text-2x" href="#"><i class="icomo-arrow-left"></i></a> Please Complete the wizard!</legend>
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">First name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="firstname3" class="input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Last name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="lastname3" class="input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">Gender?</label>
                                                    <div class="controls">
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx" type="radio" value="Male" id="rd-gender1" name="gender3" />
                                                            <label for="rd-gender1">Male</label>
                                                        </div>
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx" type="radio" value="Female" id="rd-gender2" name="gender3" />
                                                            <label for="rd-gender2">Female</label>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="submit step">
                                                <p class="lead">Thanks!</p>
                                            </div><!-- /step -->

                                            <div class="navigation form-actions">
                                                <button type="button" class="btn bg-cyan bordered forward">Forward</button>
                                                <button type="submit" class="btn bg-emerald bordered submit">Submit</button>
                                            </div><!-- /navigation -->
                                        </fieldset>
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget wizard1 style #2 -->
                            
                            
                            <!-- widget wizard2 style #2 -->
                            <div class="widget bg-cyan">
                                <!-- widget header -->
                                <div class="widget-header">
                                    <!-- widget icon -->
                                    <div class="widget-icon"><i class="aweso-edit"></i></div>
                                    <!-- widget title -->
                                    <h4 class="widget-title">Style #2</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <ul class="nav nav-tabs" id="nav-wizard2">
                                            <li class="active"><a href="#">Step 1</a></li>
                                            <li><a href="#">Step 2</a></li>
                                            <li><a href="#">Step 3</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content" id="wizard6">
                                    <form class="form-horizontal" name="wizard6" />
                                        <fieldset>
                                            <legend class="navigation"><a class="backward color-white text-2x" href="#"><i class="icomo-arrow-left"></i></a> Please Complete the wizard!</legend>
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">First name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="firstname4" class="input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                                <div class="control-group">
                                                    <label class="control-label">Last name?</label>
                                                    <div class="controls">
                                                        <input type="text" name="lastname4" class="input-xlarge" />
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="step">
                                                <div class="control-group">
                                                    <label class="control-label">Gender?</label>
                                                    <div class="controls">
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx" type="radio" value="Male" id="rd-gender3" name="gender4" />
                                                            <label for="rd-gender3">Male</label>
                                                        </div>
                                                        <div class="checkbox-rounded help-block">
                                                            <input class="input-fx" type="radio" value="Female" id="rd-gender4" name="gender4" />
                                                            <label for="rd-gender4">Female</label>
                                                        </div>
                                                    </div>
                                                </div><!-- /control-group -->
                                            </div><!-- /step -->
                                            
                                            <div class="submit step">
                                                <p class="lead">Thanks!</p>
                                            </div><!-- /step -->

                                            <div class="navigation form-actions">
                                                <button type="button" class="btn bg-cyan bordered forward">Forward</button>
                                                <button type="submit" class="btn bg-emerald bordered submit">Submit</button>
                                            </div><!-- /navigation -->
                                        </fieldset>
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /widget wizard2 style #2 -->
                            
                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->

                </article> <!-- /content page -->

                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        
        <!-- apps component js, optional -->
        <script type="text/javascript" src="js/wizard/jquery.wizard.js"></script>
        <script type="text/javascript" src="js/form-validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/form-validate/additional-methods.min.js"></script>
        
        <!-- metro js, required! -->
        <script type="text/javascript" src="js/metro-base.js"></script>
        
        <!-- demo js -->
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript" src="js/demo/form-wizard.js"></script>
    </body>
</html>
